/*
 * @description: DOM常用操作封装
 * @author: 宫晓辉
 * @update: 20190123
 */	

/* DOM选择器 */
function $(){
	var ele = arguments[0]
	if(document.querySelectorAll(ele).length==1){
		return document.querySelectorAll(ele)[0]
	}else{
		return document.querySelectorAll(ele)
	}
}
/* 例：
 * $('div')
 * $('div p')
 * $('div>p')
 * $('#aaa')
 * $('.aaa')
 * $('div:nth-child(1)')
 * $('div:nth-of-type(1)')
 * $("div:not('.aaa')")
 * / 

/* DOM元素操作封装 */
Object.assign(Element.prototype,{
	//属性查找或修改
	attr:function(){
		if(arguments.length==1){
			return this.getAttribute(arguments[0])
		}else if(arguments.length==2){
			return this.setAttribute(arguments[0],arguments[1])
		}else{
			throw new Error('attr方法参数错误！')
		}
	},
	//例：
	//console.log(document.querySelector('div').attr('class'))
	//document.querySelector('div').attr('data-txt','assaas')
	
	//属性删除
	removeAttr:function(){
		if(arguments.length==1){
			return this.removeAttribute(arguments[0])
		}else{
			throw new Error('removeAttr方法参数错误！')
		}
	},
	
	//innerHTML封装
	html:function(){  
		if(arguments.length==0){
			return this.innerHTML
		}else if(arguments.length==1){
			return this.innerHTML=arguments[0]
		}else{
			throw new Error('html方法参数错误！')
		}
	},
	
	//innerText封装
	text:function(){ 
		if(arguments.length==0){
			return this.innerText
		}else if(arguments.length==1){
			return this.innerText=arguments[0]
		}else{
			throw new Error('text方法参数错误！')
		}
	},
	//例：
	//console.log('html',document.getElementById('id1').html())
	//console.log('text',document.getElementById('id1').text())
	//document.getElementById('id1').html('<span>aaa</span>')
	//document.getElementById('id1').text('aaa')
	
	//修改样式封装
	css:function(){
		if(arguments.length==0){
			return this.style
		}else if(arguments.length==1){
			if(typeof arguments[0] == 'string'){
				return this.style[arguments[0]]
			}else if(typeof arguments[0] == 'object'){
				for(key in arguments[0]){
					this.style[key] = arguments[0][key]
				}
				return this
			}else{
				throw new Error('css方法参数错误！')
			}
		}else if(arguments.length==2){
			if(typeof arguments[0] == 'string' && typeof arguments[1] == 'string'){
				this.style[arguments[0]] = arguments[1]
				return this
			}else{
				throw new Error('css方法参数错误！')
			}
		}else{
			throw new Error('css方法参数错误！')
		}
	},
	/* 例：
	document.querySelector('#id1').addEventListener('click',function(){
		console.log(this.css())
		console.log(this.css('background'))
		console.log(this.css('background','red').css('color','white'))
		console.log(this.css({background:'blue',color:'yellow',fontSize:'28px'}))
	}) */
	
	//移除节点
	remove:function(){
		return this.parentNode.removeChild(this)
	},
	
	//在最后一个子元素后面添加节点
	append:function(){
		if(arguments.length==1){
			if(typeof arguments[0] == 'string'){
				var el = document.createElement("div")
				el.innerHTML = arguments[0]
				return this.appendChild(el.childNodes[0])
			}else{
				return this.appendChild(arguments[0])
			}
		}else{
			throw new Error('append方法参数错误！')
		}
	},
	
	//在第一个子元素前面添加节点
	prepend:function() {
		if(arguments.length==1){
			if(typeof arguments[0] == 'string'){
				var el = document.createElement("div")
				el.innerHTML = arguments[0]
				return this.insertBefore(el.childNodes[0],this.firstChild)
			}else{
				return this.insertBefore(arguments[0],this.firstChild)
			}
		}else{
			throw new Error('prepend方法参数错误！')
		}
	},
	
	//在当前元素前面添加节点
	before:function() {
		if(arguments.length==1){
			if(typeof arguments[0] == 'string'){
				var el = document.createElement("div")
				el.innerHTML = arguments[0]
				return this.parentNode.insertBefore(el.childNodes[0],this);
			}else{
				return this.parentNode.insertBefore(arguments[0],this);
			}
		}else{
			throw new Error('before方法参数错误！')
		}
	},
	
	//在当前元素后面添加节点
	after:function() {
		if(arguments.length==1){
			if(typeof arguments[0] == 'string'){
				var el = document.createElement("div")
				el.innerHTML = arguments[0]
				return this.parentNode.insertBefore(el.childNodes[0],this.nextSibling)
			}else{
				return this.parentNode.insertBefore(arguments[0],this.nextSibling)
			}
		}else{
			throw new Error('after方法参数错误！')
		}
	},
	
	//元素替换
	replaceWith:function() {
		if(arguments.length==1){
			if(typeof arguments[0] == 'string'){
				var el = document.createElement("div")
				el.innerHTML = arguments[0]
				return this.parentNode.replaceChild(el.childNodes[0],this)
			}else{
				return this.parentNode.replaceChild(arguments[0],this)
			}
		}else{
			throw new Error('replaceWith方法参数错误！')
		}
	},
	
	/* 例：
	 * $('div').remove()
	 * $('div').append('<span>aaa</span>')
	 * $('div').prepend('<span>aaa</span>')
	 * $('div').before('<span>aaa</span>')
	 * $('div').after('<span>aaa</span>')
	 * $('li').replaceWith('<li>aasas</li>')
	*/
   
	//元素隐藏
	hide:function() {
		this.style.display = "none"
	},
	
	//元素显示
	show:function() {
		this.style.display = ""  //这里设置display值为空原因是如果设置为其他如‘block’会将元素改变为块级元素，无论设置任何值都会影响引用的其他css样式
	},
	
	//显隐切换
	toggle:function() {
		if(this.style.display === 'none'){
			this.style.display = "block"
		}else{
			this.style.display = "none"
		}
	},
	
	/* 例：
	 * $('div').hide()
	 * $('div').show()
	 * $('div').toggle()
	*/
})

